<template>
  <div class="home_box">
    <!-- 导航栏 -->
    <div class="top_box">
      <div>
        <!-- 轮播图 -->
        <div class="swiper_box">
          <van-swipe :autoplay="2000" lazy-render>
            <van-swipe-item v-for="item in focusList" :key="item.id">
              <img :src="item.picUrl" />
            </van-swipe-item>
          </van-swipe>
        </div>

        <!-- 注释栏 -->
        <div class="annotation_box">
          <van-row>
            <van-col :span="8" v-for="(item, index) in policyDescList" :key="index">
              <div class="grow">
                <img :src="item.icon" style="width: 20px; height: 20px" />
                <span style="font-size: 14px">{{ item.desc }}</span>
              </div>
            </van-col>
          </van-row>
        </div>

        <!-- nav盒子 -->
        <div class="navs_box" v-for="(item, index) in kingKongList" :key="index">
          <div class="navs1">
            <div>
              <img :src="item.picUrl" />
              <span>{{ item.text }}</span>
            </div>
          </div>
        </div>
        <div class="count_box">
          <img src="/images/homeImg/05.png" alt="" />
        </div>

        <!-- 新人专享礼 -->
        <div class="newPeople_box">
          <div class="gift">
            <p>—新人专享礼—</p>
          </div>
          <div class="people_box">
            <div class="big_box">
              <div class="name">新人专享礼包</div>
              <div class="image">
                <van-icon
                  name="https://yanxuan.nosdn.127.net/static-union/1648017994dd2933.png"
                  size="130"
                />
              </div>
            </div>

            <div class="small_box">
              <div class="small1">
                <div class="small1_1">
                  <div class="benf">{{ indexActivityModule[0]?.title }}</div>
                  <div class="price">{{ indexActivityModule[0]?.subTitle }}</div>
                </div>
                <div class="small1_2">
                  <div class="money">
                    <div class="money1">{{ indexActivityModule[0]?.activityPrice }}</div>
                    <div class="money2">{{ indexActivityModule[0]?.originPrice }}</div>
                  </div>
                  <div class="image">
                    <img :src="indexActivityModule[0]?.picUrl" alt="" />
                  </div>
                </div>
              </div>
              <div class="small2">
                <div class="small2_1">
                  <div class="benf">{{ indexActivityModule[1]?.title }}</div>
                  <div class="price">{{ indexActivityModule[1]?.tag }}</div>
                </div>
                <div class="small2_2">
                  <div class="money">
                    <div class="money1">{{ indexActivityModule[1]?.activityPrice }}</div>
                    <div class="money2">{{ indexActivityModule[1]?.originPrice }}</div>
                  </div>
                  <div class="image">
                    <img :src="indexActivityModule[1]?.picUrl" alt="" />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 类目热销榜 -->
        <div class="saleHot_box">
          <div class="gift">
            <p>类目热销榜</p>
          </div>
          <div class="big">
            <van-row class="navs1">
              <van-col
                :span="index === 0 || index === 1 ? 12 : 6"
                v-for="(item, index) in categoryList"
                :key="index"
                class="navs2"
              >
                <div class="content">
                  <span>{{ item.categoryName }}</span>
                  <img :src="item.picUrl" />
                </div>
              </van-col>
            </van-row>
          </div>
          <!-- 为你精选 -->
          <div class="detail">
            <p>为你精选</p>
          </div>
          <div class="choose_box">
            <div>
              <ul class="list">
                <div>
                  <li class="list_box" style="z-index: 20" v-for="item in itemList" :key="item.id">
                    <div class="waraper">
                      <img :src="item.scenePicUrl" alt="" />
                    </div>
                    <div class="name">
                      <van-icon
                        name="	https://yanxuan.nosdn.127.net/static-union/16698631101bcf18.png"
                      />
                      {{ item.name }}
                    </div>
                    <div class="luckmoeny">
                      <img
                        src="https://yanxuan.nosdn.127.net/static-union/166909947513c0c8.png"
                        alt=""
                      />

                      <span>可用红包</span>
                    </div>
                    <div class="price">
                      <div class="price1">
                        <span class="prefix">{{
                          item.finalPriceInfoVO.priceInfo.finalPrice?.prefix
                        }}</span>
                        <span class="prefix">￥</span>
                        <span
                          class="prefix1"
                          v-if="item.finalPriceInfoVO.priceInfo.finalPrice?.price"
                          >{{ item.finalPriceInfoVO.priceInfo.finalPrice?.price }}</span
                        >
                        <span class="prefix1" v-else>{{
                          item.finalPriceInfoVO.priceInfo?.basicPrice
                        }}</span>
                      </div>
                      <div class="price2" v-if="item.finalPriceInfoVO.priceInfo.counterPrice">
                        <span>￥</span>
                        <span>{{ item.finalPriceInfoVO.priceInfo.counterPrice }}</span>
                      </div>
                    </div>
                    <div class="banner_wrap" v-if="item.finalPriceInfoVO.banner?.content">
                      <div style="font-size: 0.2rem">
                        <div class="right">{{ item.finalPriceInfoVO.banner?.content }}</div>
                      </div>
                    </div>
                  </li>
                </div>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { reqHomeItemList, reqHomeItems } from '@/api/home'
import { onMounted } from 'vue'
import {
  policyDescList,
  kingKongList,
  focusList,
  indexActivityModule,
  categoryList,
  // IReqCateListItem,
  IReqChooseItem
} from '@/types/home'

const isLoading = ref(true)

const policyDescList = ref<policyDescList[]>([])

const kingKongList = ref<kingKongList[]>([])

const focusList = ref<focusList[]>([])

const indexActivityModule = ref<indexActivityModule[]>([])

const categoryList = ref<categoryList[]>([])

// const cateList = ref<IReqCateListItem[]>([])

const itemList = ref<IReqChooseItem[]>([])

// 获取主页内容
const getHomeItems = async () => {
  const res = await reqHomeItems()

  policyDescList.value = res.data.data.policyDescList

  kingKongList.value = res.data.data.kingKongModule.kingKongList

  focusList.value = res.data.data.focusList

  indexActivityModule.value = res.data.data.indexActivityModule

  categoryList.value = res.data.data.categoryHotSellModule.categoryList
}

const getHomeItemList = async () => {
  const res = await reqHomeItemList({
    itemIdsStr: '',
    size: 20
  })

  itemList.value = res.data.itemList
}

// 获取tag标签滚动内容
// const getHomeCateList = async () => {

//   const res = await reqHomeCateList()

//   cateList.value = res.data.data.categoryList
// }

onMounted(() => {
  getHomeItems()

  getHomeItemList()

  isLoading.value = false
})
</script>

<script lang="ts">
export default {
  name: 'toHomeView'
}
</script>

<style scoped lang="less">
.header_box {
  display: flex;
  justify-content: space-around;
  p {
    font-size: 24px;
    font-weight: bold;
    padding-left: 20px;
  }
}
.change_box {
  display: flex;
  justify-content: space-evenly;
  .arrow_box {
    z-index: 10;
    width: 20px;
    height: 20px;
    background-color: #e23e3e;
    .wrapper {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
    }

    .block {
      display: inline-block;
      width: 120px;
      height: 120px;
      background-color: #eae0e0;
    }
  }
}
.swiper_box {
  .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
  }
  img {
    display: block;
    width: 374px;
    height: 200px;
  }
}
.navs_box {
  display: inline-block;
  margin: auto;
  .navs1 {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .navs1 > div {
    display: flex;
    flex-direction: column;
    margin: 9px;
  }
  img {
    width: 50px;
    height: 50px;
    text-align: center;
  }
  span {
    font-size: 14px;
    margin-top: 10px;
    text-align: center;
  }
}

.annotation_box {
  width: 374px;
  .grow {
    display: flex;
    justify-content: space-evenly;
    span {
      margin-top: 5px;
      display: block;
    }
  }
}
.count_box {
  margin-left: 10px;
  img {
    width: 350px;
    height: 100px;
  }
}
.newPeople_box {
  font-size: 24px;
  .gift {
    font-size: 16px;
    text-align: center;
    display: inline-block;
    margin-left: 130px;
  }
  .people_box {
    width: 325px;
    display: inline-block;
    margin: auto;
    display: flex;
    justify-content: space-between;
    .big_box {
      background-color: #f9e9cf;
      width: 160px;
      height: 220px;

      .name {
        font-family: PingFangSC-Medium;
        font-size: 16px;
        padding-top: 20px;
        padding-left: 10px;
      }
      .image {
        width: 300px;
        height: 200px;
        margin-left: 20px;
        padding-top: 35px;
      }
    }
    .small_box {
      .small1 {
        width: 160px;
        height: 105px;
        background-color: #fbe2d3;
        display: flex;
        justify-content: space-between;
        .small1_1 {
          padding-left: 10px;
          padding-top: 10px;
          .benf {
            display: inline-block;
            font-size: 16px;
            font-family: PingFangSC-Medium;
          }
          .price {
            color: #7f7f7f;
            font-size: 12px;
            font-family: PingFangSC-Medium;
          }
        }
        .small1_2 {
          .money {
            display: block;
            width: 50px;
            height: 50px;
            background-color: #f59524;
            border-radius: 50%;
            margin-right: 10px;
            .money1 {
              font-size: 14px;
              color: white;
              text-align: center;
              padding-top: 10px;
            }
            .money2 {
              font-size: 14px;
              color: white;
              text-align: center;
              text-decoration: line-through;
            }
          }
          .image {
            margin-right: 40px;
            width: 40px;
            height: 40px;

            img {
              width: 55px;
              height: 55px;
            }
          }
        }
      }
      .small2 {
        width: 160px;
        height: 105px;
        background-color: #ffecc2;
        margin-top: 10px;
        display: flex;
        justify-content: space-between;
        .small2_1 {
          padding-left: 10px;
          padding-top: 10px;
          .benf {
            display: inline-block;
            font-size: 16px;
            font-family: PingFangSC-Medium;
          }
          .price {
            color: #7f7f7f;
            font-size: 12px;
            font-family: PingFangSC-Medium;
          }
        }
        .small2_2 {
          .money {
            display: block;
            width: 50px;
            height: 50px;
            background-color: #f59524;
            border-radius: 50%;
            margin-right: 10px;
            .money1 {
              font-size: 14px;
              color: white;
              text-align: center;
              padding-top: 10px;
            }
            .money2 {
              font-size: 14px;
              color: white;
              text-align: center;
              text-decoration: line-through;
            }
          }
          .image {
            margin-right: 40px;
            width: 40px;
            height: 40px;

            img {
              width: 55px;
              height: 55px;
            }
          }
        }
      }
    }
  }
}
.saleHot_box {
  font-size: 22px;
  font-family: PingFangSC-Regular;
  margin-left: 10px;
  .gift {
    font-size: 16px;
    text-align: center;
    display: inline-block;
    margin-left: 10px;
  }
  .big {
    width: 345px;
    display: flex;
    justify-content: space-between;
    margin: auto;
    flex-wrap: wrap;
    .navs1 {
      .navs2 {
        &:nth-child(1) {
          background-color: #f9f3e4;
          width: 165px;
          height: 100px;
          border: 2px solid white;
          img {
            padding-left: 20px;
            padding-top: 10px;
            text-align: center;
            display: inline-block;
          }
          span {
            font-size: 14px;
            text-align: center;
            display: inline-block;
            padding-left: 10px;
            padding-bottom: 20px;
          }
        }
        &:nth-child(2) {
          background-color: #ebeff6;
          width: 165px;
          height: 100px;
          border: 2px solid white;
          img {
            padding-left: 20px;
            padding-top: 10px;
            text-align: center;
            display: inline-block;
          }
          span {
            font-size: 14px;
            text-align: center;
            padding-left: 10px;
          }
        }
        &:nth-last-child(-n + 7) {
          width: 86px;
          height: 95px;
          background-color: #f5f5f5;
          border: 2px solid white;
          img {
            padding-left: 10px;
            text-align: center;
            display: inline-block;
          }
          span {
            font-size: 13px;
            padding-left: 10px;
            text-align: center;
          }
        }
        .content {
          img {
            width: 60px;
            height: 60px;
            text-align: center;
          }
          span {
            font-size: 14px;
            margin-top: 10px;
            text-align: center;
            font-family: PingFangSC-Medium;
          }
        }
      }
    }
  }
}
.detail {
  p {
    font-size: 22px;
    font-weight: bold;
    margin-left: 15px;
  }
}
.choose_box {
  .list > div {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
  }
  .list li {
    margin-top: 20px;

    .waraper {
      img {
        width: 160px;
        height: 160px;
        border-radius: 10%;
      }
    }
    .name {
      img {
        width: 15px;
        height: 15px;
      }
      font-size: 14px;
      width: 160px;
    }
    .luckmoeny {
      width: 58px;
      height: 18px;
      border: 1px solid gainsboro;
      img {
        width: 10px;
        height: 10px;
      }
      font-size: 12px;
      border-radius: 25%;
      line-height: 18px;
    }
    .price {
      .price1 {
        display: inline-block;
        .prefix {
          color: rgb(239, 58, 58);
          font-weight: bold;
          font-size: 16px;
        }
        .prefix1 {
          font-size: 22px;
          color: rgb(239, 58, 58);
          font-weight: bold;
        }
      }
      .price2 {
        display: inline-block;
        span {
          color: rgb(153, 153, 153);
          text-decoration: line-through;
          font-size: 16px;
        }
      }
    }
    .banner_wrap {
      width: 175px;
      height: 20px;
      background-color: #ffe9eb;
      border-radius: 25px;
      .right {
        color: #fa1e32;
        font-size: 14px;
        font-weight: bold;
        margin-left: 10px;
      }
    }
  }
}
.nav_box {
  display: inline-block;
  margin: auto;
  .navs {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .navs > div {
    display: flex;
    flex-direction: column;
    margin-left: 6px;
    background-color: #f5f5f5;
    width: 60px;
    height: 60px;
  }
  img {
    width: 50px;
    height: 50px;
    text-align: center;
  }
  span {
    font-size: 14px;
    margin-top: 10px;
    text-align: center;
  }
}
</style>
